<template>
	<view>
		<swiper class="banner" indicator-dots="true" indicator-color="#E4E4E4" indicator-active-color="#D7A068"
			autoplay="true" circular="true">
			<swiper-item>
                <!-- 图片尺寸750*814 -->
                    <view :style="`background-image:url(${hasHttps()})`" class="banner-img"></view>
            </swiper-item>
		</swiper>

		<view class="good-head">
			<view class="name">
				{{goods.name}}
			</view>
            <view class="price">
				<text>￥</text>
				<text class="t1">{{goods.price}}</text>
				<!-- <text class="t2">券后</text>
				<text class="t3">￥{{goods.marketPrice}}</text> -->
			</view>
		</view>

		<view class="detail">
			<view class="title">商品详情</view>
			<view class="cont">
                <uv-parse :content="goods.introduction" :tagStyle="parseStyle"></uv-parse>
			</view>
		</view>
		<view class="footer">
			<view class="btn buy bg-line-color" @click="popupRef.open()">领券购买</view>
		</view>
        <uv-popup ref="popupRef" round="12" mode="bottom" 
            custom-style="height: 50vh;" 
            bgColor="#f5f5f5" 
            :closeable="true"
            closeIconPos="top-right">
			<view class="sku-back">
                <view class="flex">
                    <image class="sku-image" :src="`${goods.logo.includes('https:')?goods.logo:(uniConfig.ssoPath + goods.logo)}`" mode="aspectFill"></image>
                    <view>
                        <view class="title">{{ goods.name }}</view>
                        <view class="sku-price"><text>￥</text>{{goods.price}}</view>
                        <!-- <view class="sku-sales">已售：{{skuInfo.sales}}</view> -->
                    </view>
                </view>
                <view class="flex-center-sb sku-num">
                    <view class="title-text">数量</view>
                    <uv-number-box :min="1" button-size="30" :max="goods.maxBuyNum" v-model="quantity"></uv-number-box>
                </view>
                <view class="sku-button">
                    <!-- <view v-if="sku_type==1" class="flex-center-sb">
                        <view class="submitBt add" @click="skuaddCart">加入购物车</view>
                        <view class="submitBt buy" @click="skuBuy">立即购买</view>
                    </view> -->
                    <view class="submitBt bg-line-color" @click="skuSubmit">购买</view>
                </view>
            </view>
		</uv-popup>
	</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import { getCouponProduct , buyCouponProduct } from "@/api/product"
import { setPaymethod } from "@/api/order"
import { uniConfig } from '@/config/index'
import { useUCenterStore } from '@/stores/uCenter'
const store = useUCenterStore()
const popupRef = ref()
const goods = ref<any>({})
const quantity = ref<any>(1)
const parseStyle = ref<any>(
  {
    // 字符串的形式
    p: 'font-size:32rpx',
    span: 'font-size: 32rpx',
    img:'max-width: 100%;height: auto;'
  }
)
const hasHttps = () => {
    return `${goods.value.logo.includes('https:')?goods.value.logo:(uniConfig.ssoPath + goods.value.logo)}`
}
const skuSubmit = () => {
    if(store.memberInfo.mobile){
        buyCouponProduct({
            id:goods.value.id,
            quantity:quantity.value
        }).then(res => {
            if(res.success){
                setPaymethod({
                    openid:store.memberInfo.openid,
                    paymethod:'wxminiPay',
                    tradeno:res.data
                }).then(payInfo => {
                    if(payInfo.success){
                        const info = payInfo.data
                        uni.requestPayment({
                            "provider": "wxpay",
                            ...info,
                            success(res) {
                                // uni.showToast({
                                //     icon:'success',
                                //     title:"支付成功"
                                // })
                                uni.redirectTo({url:'/pages/mall/paySuccess?isPower=Y'})
                            },
                            fail(e) {
                                uni.showToast(payInfo.msg)
                            }
                        })
                    }else{
                        uni.showToast(payInfo.msg)
                    }
                })
            }
        })
    }else{
        const pages = getCurrentPages() // 获取当前打开过的页面路由数组
        const currentPage = pages[pages.length - 1]
        let fullPath = currentPage.route
        if (Object.keys(currentPage.options).length) {
            fullPath = `/${currentPage.route}?${Object.keys(
            currentPage.options
            ).map(key => `${key}=${currentPage.options[key]}`)
            .join('&')}`
        }
        store.$patch((state) => {
            state.redirectPath = fullPath
        })
        // 如果当前未有登录信息，弹窗时报未登录，有登陆信息则报异常用户信息
        
        uni.redirectTo({
            url: '/pages/auth/index'
        })
    }
    
}
const exPaymethod = (trandNo : any) => {
    
}
onLoad((options : any) => {
    console.info('options',options)
    getCouponProduct({id : options.id}).then(res => {
        goods.value = res.data
        uni.setNavigationBarTitle({
            title: res.data.name
        })
    })
})
</script>
<style lang="scss">
page {
    background-color: #f1f1f1;
    padding-bottom: 160upx;
    box-sizing: border-box;
}

.banner {
    height: 100vw;
    width: 100%;
    
}
.banner-img {
    width: 100%;
    height:  100vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.good-head {
    margin: 26upx;
    border-radius: 20upx;
    box-sizing: border-box;
    background-color: #fff;
    .price {
		color: $uni-color-primary;
		font-size: 42upx;
		width: 100%;
		padding: 0 32upx 32upx;
		box-sizing: border-box;
		font-weight: 600;
        .t1 {
            font-size: 52upx;
        }
        .t2 {
            font-size: 28upx;
            margin-left: 16upx;
        }
        .t3 {
            font-size: 28upx;
            color: #999999;
            margin-left: 16upx;
            text-decoration: line-through;
        }
	}
    .name {
		font-size: 32upx;
		font-weight: 600;
		padding:32upx;
		box-sizing: border-box;
	}
    .mid {
		padding: 0 32upx 29upx 32upx;
		border-bottom: 1px solid #EBECEC;
	}
    .mid .left {
		float: left;
		border: 1px solid #FA4323;
		border-radius: 10upx;
		overflow: hidden;
		color: #FA4323;
		line-height: 30upx;
		font-size: 20upx;
		float: left;
		padding-right: 8upx;
	}
    .mid .left text {
		background-color: #FA4323;
		color: #ffffff;
		display: inline-block;
		width: 30upx;
		height: 30upx;
		text-align: center;
		margin-right: 5upx;
	}
    .mid .right {
		float: right;
		font-size: 24upx;
		color: #999999;
	}
    .mid .right .iconfont {
		font-size: 22upx;
		display: inline-block;
		margin-left: 10upx;
	}
    .mid .right .top {
		transform: rotate(90deg);
	}
    .mid .right .bottom {
		transform: rotate(-90deg);
	}
    .mid .couponBox {
		width: 644upx;
		height: 125upx;
		margin: 24upx auto 0 auto;
		position: relative;
	}
    .mid .couponBox .couponBg {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
	}
    .mid .couponBox .money {
		z-index: 10;
		width: 180upx;
		line-height: 125upx;
		color: #FB3E2B;
		position: absolute;
		left: 0;
		text-align: center;
		font-size: 37upx;
		font-weight: bold;
	}
    .mid .couponBox .money text {
		font-size: 59upx;
	}
    .mid .couponBox .tt {
		position: absolute;
		left: 180upx;
		z-index: 10;
		box-sizing: border-box;
		padding: 28upx 48upx;
	}
    .mid .couponBox .tt .top {
		font-size: 28upx;
		color: #333333;
		font-weight: bold;
	}
    .mid .couponBox .tt .date {
		font-size: 24upx;
		color: #999999;
	}
    .ass {
		height: 72upx;
		line-height: 72upx;

        .icon1 {
            height: 30upx;
            margin: 24upx 0 0 37upx;
            float: left;
        }

        text {
            font-size: 22upx;
            margin-left: 9upx;
        }

        .icon {
            display: inline-block;
            line-height: 72upx;
            font-size: 22upx;
            margin-left: 35upx;
        }
        .icon .iconfont {
            font-size: 24upx;
            margin-right: 5upx;
            display: inline-block;
        }
	}
}
.shop {
    width: 702upx;
    height: 128upx;
    line-height: 128upx;
    margin: 26upx auto;
    background-color: #fff;
    border-radius: 20upx;
    padding: 0 26upx;
    box-sizing: border-box;
}

.shop .logo {
    width: 82upx;
    height: 82upx;
    border-radius: 50%;
    margin-top: 23upx;
    float: left;
}

.shop .shopName {
    display: inline-block;
    font-size: 32upx;
    color: #565656;
    margin-left: 17upx;
    width: 400upx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop .more {
    float: right;
    height: 50upx;
    line-height: 50upx;
    width: 145upx;
    margin-top: 39upx;
    text-align: center;
    color: #DA9B65;
    font-size: 24upx;
    border: 1px solid #DA9B65;
    border-radius: 50upx;
}

.about {
    width: 702upx;
    margin: 26upx auto;
    background-color: #fff;
    border-radius: 20upx;
    padding: 0 26upx 10upx 26upx;
    box-sizing: border-box;

}

.about .title {
    line-height: 88upx;
    font-size: 32upx;
    font-weight: bold;
}

.about .list {
    width: 100%;
    height: 390upx;
}

.about .list .list_item {
    display: flex;
    justify-content: space-around;
}

.about .list .list_item .item {
    width: 200upx;
}

.about .list .list_item .item .img {
    width: 200upx;
    height: 200upx;
    border-radius: 10upx;
    display: block;
    margin: 0 auto;
}


.about .list .list_item .item .name {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 30upx;
    font-size: 24upx;
    margin: 14upx 0;
}

.about .list .list_item .item .price {
    color: #FA4323;
    font-size: 24upx;
}

.about .list .list_item .item .price text {
    font-size: 32upx;
}

.detail {
    margin: 26upx;
    border-radius: 20upx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 9px;
}

.detail .cont{
    padding:0 32rpx 32rpx;
}

.detail .title {
    font-size: 32upx;
    font-weight: bold;
    padding:32upx;
    background-color: #fff;
    border-top-left-radius: 20upx;
    border-top-right-radius: 20upx;
}

.detail .cont .img {
    width: 100%;
    display: block;
}

.footer {
    height: 135upx;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    text-align: center;
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
    padding: 0 24upx;
    z-index: 11;
}

.footer .collect {
    padding-top: 28upx;
    font-size: 22upx;
}

.footer .collect .iconfont {
    display: block;
    font-size: 33upx;
    margin-bottom: 5upx;
}

.footer .collect .icon-shoucang-shoucang {
    color: #F3AC67;
}

.footer .btn {
    width: 98%;
    height: 88upx;
    line-height: 88upx;
    margin-top: 16upx;
    font-size: 32upx;
    border-radius: 50upx;
}

.footer .share {
    background-color: #F9D5B3;
    color: #CA812F;
}

.footer .buy {
    background-color: #F7432B;
    color: #fff;
}


.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99;
    background: rgba(0, 0, 0, 0.5);
}

.shareBox {
    width: 100%;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    border-top-left-radius: 42upx;
    border-top-right-radius: 42upx;
}

.shareBox .top {
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding: 22upx 0;
}

.shareBox .top .btn {
    font-size: 25upx !important;
    font-weight: normal !important;
    background-color: #fff;
    text-align: center;
    color: #333333;
}

.shareBox .top .btn::after {
    border: none !important;
}

.shareBox .top .btn .icon {
    height: 100upx;
    display: block;
    margin: 0 auto 19upx auto;
}

.shareBox .closeBtn {
    width: 670upx;
    text-align: center;
    font-size: 28upx;
    background-color: #ffffff;
    line-height: 100upx;
    border-radius: 50upx;
    color: #666666;
    margin: 0 auto;
}

.panel {
    width: 702upx;
    margin: 22upx auto;
    background-color: #fff;
    border-radius: 20upx;
    font-size: 28upx;
}

.panel .title {
    padding: 26upx 34upx;
    font-weight: bold;
}

.panel .cont {
    padding: 0 34upx 26upx 34upx;
}

.panel .cont .titl {
    color: #666666;
    margin-top: 28upx;
}

.panel .cont .p {
    color: #999999;
}

.noMore {
    text-align: center;
    color: #999999;
    font-size: 28upx;
    margin: 28upx 0;
}
.sku-back {
    padding: 42upx;
    .sku-image {
        width: 180rpx;
        height: 180rpx;
        border-radius:9px;
    }
    .title{
        font-size:32upx;
        font-weight: 600;
        padding:32upx;
    }
    .sku-price {
        font-size: 36rpx;
        font-weight: bold;
        color: #F64D24;
        margin-left: 30rpx;

        text {
            font-size: 26rpx;
        }
    }

    .sku-sales {
        margin-top: 20rpx;
        margin-left: 30rpx;
        color: #666;
    }

    .title-text {
        font-weight: bold;
        font-size:26upx;
        margin-top: 42upx;
    }

    .sku-item {
        display: flex;
        .sku-item-name-s {
            background-color: #F64D24;
            color: #fff;
            height: 60rpx;
            line-height: 60rpx;
            font-size: 26rpx;
            padding: 0 25rpx;
            border-radius: 30rpx;
            margin-top: 20rpx;
        }

        .sku-item-name-n {
            background-color: #eee;
            color: #666;
            height: 60rpx;
            line-height: 60rpx;
            font-size: 26rpx;
            padding: 0 25rpx;
            border-radius: 30rpx;
            margin-top: 20rpx;
        }
    }

    .sku-num {
        margin-top: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .submitBt{
        position: fixed;
        bottom: 5%;
        width: 92%;
        left: 4%;
        height: 82rpx;
        text-align: center;
        line-height: 82rpx;
        border-radius: 42px;
        font-size: 32rpx;
        font-weight: 600;
        background: linear-gradient(90deg, #F20100 0%, #FD4E16 100%);
        color: #fff;
    }

    .sku-button {
        margin-top: 30rpx;
    }

    .add {
        background: linear-gradient(90deg, #F20100 0%, #FD4E16 100%);
        width: 45%;
    }

    .buy {
        background: linear-gradient(90deg, #FFA600 0%, #FFBB00 100%);
        width: 45%;
    }
}
</style>